<template>
	<div>
		<!--数据统计-->
		<div class="page has-navbar" v-nav="{title: '数据统计', showBackButton: true}">
			<div class="page-content padding-top">
				<div class="stati-title">
					<div class="stati-title-data">
						<i class="iconfont">&#xe619;
						<input type="month" ref="hasaki" v-model="birth" />
					</i>
						<span @click="slideChange">车商</span>
					</div>
				</div>
				<div class="stati-list">
					<!--可循环-->
					<div class="stati-item" @click="toLink(1,thisMonthStorageInfo)">
						<i class="iconfont"><img src="../../assets/images/tj_rklj.svg"/></i>
						<span>入库累计</span>
						<small>{{thisMonthStorageInfo}}台</small>
					</div>
					<div class="stati-item" @click="toLink(2,totalOutStorageInfo)">
						<i class="iconfont"><img src="../../assets/images/tj_cklj.svg"/></i>
						<span>出库累计</span>
						<small>{{totalOutStorageInfo}}台</small>
					</div>
					<div class="stati-item" @click="toLink(3,totalStorageInfo)">
						<i class="iconfont"><img src="../../assets/images/tj_dykc.svg"/></i>
						<span>当月库存</span>
						<small>{{totalStorageInfo}}台</small>
					</div>
					<div class="stati-item" @click="toLink(4,currentStorageInfo)">
						<i class="iconfont"><img src="../../assets/images/tj_dqzk2.svg"/></i>
						<span>当前库存</span>
						<small>{{currentStorageInfo}}台</small>
					</div>
				</div>
				<div class="daystati">
					<div class="daystati-title">
						<i class="iconfont">&#xe607;</i> 日库存小计
						<span>{{birthday}}
						<input type="date" v-model="birthday" />
					</span>
					</div>
					<div class="daystati-section">
						<div class="daystati-list">
							<div class="daystati-item" @click="toLinkDay(1,storageInfo)">
								<i class="iconfont"><img src="../../assets/images/tj_yrk.svg" width="32" height="32" /></i>
								<span>已入库</span>
								<small>{{storageInfo}}台</small>
							</div>
							<div class="daystati-item" @click="toLinkDay(2,outStorageInfo)">
								<i class="iconfont"><img src="../../assets/images/tj_yck.svg" width="32" height="32" /></i>
								<span>已出库</span>
								<small>{{outStorageInfo}}台</small>
							</div>
							<div class="daystati-item" @click="toLinkDay(5,carOrderInfo)">
								<i class="iconfont"><img src="../../assets/images/tj_yyd.svg" width="32" height="32" /></i>
								<span>已预订</span>
								<small>{{carOrderInfo}}台</small>
							</div>
						</div>
					</div>
				</div>
				<div class="daystati" v-if="shopId">
					<div class="daystati-title">
						<i class="iconfont">&#xe60e;</i> 日销售小计
						<span>{{birthday2}}
						<input type="date" v-model="birthday2" />
					</span>
					</div>
					<div class="daystati-section">
						<div class="daystati-list">
							<div class="daystati-item" @click="toLinkDay(10,customerUp)">
								<i class="iconfont"><img src="static/images/tj_ygj.svg" width="32" height="32" /></i>
								<span>已跟进</span>
								<small>{{customerUp}}台</small>
							</div>
							<div class="daystati-item" @click="toLinkDay(20,customerApp)">
								<i class="iconfont"><img src="static/images/tj_yjd.svg" width="32" height="32" /></i>
								<span>已接待</span>
								<small>{{customerApp}}台</small>
							</div>
							<div class="daystati-item" @click="toLinkDay(50,customerDeal)">
								<i class="iconfont"><img src="static/images/tj_ycj.svg" width="32" height="32" /></i>
								<span>已成交</span>
								<small>{{customerDeal}}台</small>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--入库累计-->
		</div>
		<transition name="bottom"  v-if="slideChangeIs">
			<keep-alive>
				<modal @modalChange='modalChange' />
			</keep-alive>
		</transition>
	</div>
</template>
<script type="text/javascript">
	// 当前日期绑定

	function dateToActive(e) {
		var myTime = new Date()

		function toStringm(day, m) {
			var dayt = day.toString()
			if(dayt.length < 2) {
				if(m) {
					++dayt
				}
				dayt = '0' + dayt
				return dayt
			}
			return dayt
		}
		if(e == 2)
			return myTime.getFullYear().toString() + '-' + toStringm(myTime.getMonth(), true)
		if(e == 3)
			return myTime.getFullYear().toString() + '-' + toStringm(myTime.getMonth(), true) + '-' + toStringm(myTime.getDate(), false)
	}
	var birth = dateToActive(2)
	var birthday = dateToActive(3)
	import 'src/assets/css/home.css'
	import 'src/assets/fonts/iconfont/iconfont.css'
	// import 'src/assets/fonts/iconfont/iconfont.js'
	import { bus } from 'bus.js'
	import slidebar from './slidebar.vue'
	import modal from 'src/assembly/modal.vue'
	
	export default {
		data() {
			return {
				birth: birth, //初始查询（月）
				birthday: birthday, //初始查询（日）
				birthday2:birthday,
				thisMonthStorageInfo: 0,
				totalOutStorageInfo: 0,
				totalStorageInfo: 0,
				currentStorageInfo: 0,

				carOrderInfo: 0,
				outStorageInfo: 0,
				storageInfo: 0,
				customerDeal: 0,
				customerUp: 0,
				customerApp: 0,
				modal: undefined,
				slideChangeIs: false,
				shopId:sess.get('userSession').shopId
			}
		},
		components: {
			slidebar,
			modal
		},
		methods: {
			//月统计
			monthGetData() {
				window.axios.get(baseUrl + '/controller/statis/app/getCarStorageOutline', {
					params: {
						month: this.birth,
						marketId: this.userSession.marketId,
						shopId: this.$store.state.shopId
					}
				}).then((res) => {
					this.changeStorage(res)
				})
			},
			//日客户
			getCustomerNum(){
				window.axios.get(baseUrl + '/crm-web/controller/resForApp/countFollowOutline', {params:{
					queryDate:this.birthday2,
					shopId:this.$store.state.shopId
				}}).then(res=>{
					this.customerDeal = res.data.result.fixtureUpInfo.fixtureUpNum
					this.customerUp = res.data.result.followUpInfo.followUpNum
					this.customerApp = res.data.result.orderUpInfo.orderUpNum
				})
			},
			changeStorage(res) {
				this.thisMonthStorageInfo = res.data.result.thisMonthStorageInfo.storageNum
				this.totalOutStorageInfo = res.data.result.totalOutStorageInfo.storageNum
				this.totalStorageInfo = res.data.result.totalStorageInfo.storageNum
				this.currentStorageInfo = res.data.result.currentStorageInfo.storageNum
			},
			//日统计
			dayGetData() {
				window.axios.get(baseUrl + '/controller/statis/app/getCarStorageDay', {
					params: {
						startDate: this.birthday,
						marketId: this.userSession.marketId,
						shopId: this.$store.state.shopId
					}
				}).then((res) => {
					this.changeDayStorage(res)
				})
			},
			changeDayStorage(res) {
				this.carOrderInfo = res.data.result.carOrderInfo.storageNum
				this.outStorageInfo = res.data.result.outStorageInfo.storageNum
				this.storageInfo = res.data.result.storageInfo.storageNum
			},
			//跳转链接
			toLinkDay(index, a) {
				let follow = ''
				if(index==10||index==20||index==50)
					follow = '1'
				if(a <= 0)
					$toast.show('起辕汽车：亲，这里没有数据哦', 3000)
				else {
					//					console.log(this.$router)
					this.$router.push({
						path: '/tabs/' + this.birthday + '/' + index,
						query: {
							timeDay: follow ?this.birthday2:this.birthday,
							typeId: index,
							marketId: this.userSession.marketId,
							shopId: this.$store.state.shopId,
							follow:follow,
						}
					})
				}
			},
			toLink(index, a) {
				
				if(a <= 0)
					$toast.show('起辕汽车：亲，这里没有数据哦', 3000)
				else {
					this.$router.push({
						path: '/tabs/' + this.birth + '/' + index,
						query: {
							time: this.birth,
							typeId: index,
							marketId: this.userSession.marketId,
							shopId: this.$store.state.shopId,
							follow:'',
						}
					})
				}
			},
			// 弹出窗口
			slideChange() {
				this.slideChangeIs = true
			},
			modalChange(val) {
				this.slideChangeIs = false
				if(this.$store.state.shopId == '' || this.$store.state.shopId != val) {
					//					console.log(id)
					this.$store.commit('shopIdChange', val)
					this.monthGetData()
					this.dayGetData()
				}
			},

		},
		watch: {
			'birthday': function() {
				this.dayGetData()
			},
			'birth': function() {
				this.monthGetData()
			},
			'birthday2'(){
				this.getCustomerNum()
			}
		},
		mounted: function() {
			this.getCustomerNum()
			setTimeout(() => {
				this.monthGetData()
				this.dayGetData()

			}, 20)

		},
		destroyed() {
			if(this.modal)
				$modal.destroy(this.modal)
		},
		computed: {
			// 获取tab标签dom
			userSession() {
				return sess.get('userSession')
			}
		},
		created: function() {
			if(sess.get('userSession') == null) {
				this.$router.push({
					path: '/login'
				})
			} else {
				if(this.$store.state.shopIdChangeIs) {
					var shopId = sess.get('userSession').shopId ? sess.get('userSession').shopId : ''
					this.$store.commit('shopIdChange', shopId)
				}
			}
		}
	}
</script>